import React, { useMemo, useCallback } from 'react';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { toValidScalePX } from '@/utils/index';
import Icon from '@/components/Icon';
import './index.scss';
import { titleStyle, titleEntranceType } from './constants';

const ModuleTitle = ({ componentCfg = {} }) => {
  const { styleSettingRender: styleRender, content } = componentCfg;
  const wrapStyles = useMemo(() => {
    return {
      paddingTop: styleRender.paddingTop,
      paddingBottom: styleRender.paddingBottom,
      background: styleRender.backgroundColor,
    };
  }, [styleRender]);
  const titleStyles = useMemo(() => {
    return {
      fontSize: toValidScalePX(styleRender.fontSize),
      color: styleRender.color,
      justifyContent: styleRender.textAlign,
      fontWeight: styleRender.fontWeight,
    };
  }, [styleRender]);

  const iconStyles = useMemo(() => {
    return {
      width: toValidScalePX(styleRender.fontSize),
      height: toValidScalePX(styleRender.fontSize),
      marginLeft: '-' + toValidScalePX(styleRender.fontSize),
    };
  }, [styleRender]);

  const goToOtherPageByLink = useCallback((url) => {
    Taro.navigateTo({
      url,
    });
  }, []);

  return (
    <View
      className="ModuleTitle"
      style={wrapStyles}
      onClick={() =>
        styleRender.style === titleStyle.two &&
        content?.link?.length &&
        goToOtherPageByLink(content?.link)
      }
    >
      <View className="title" style={titleStyles}>
        {content.text}
      </View>
      {styleRender.style === titleStyle.two &&
        styleRender.entranceType === titleEntranceType.icon && (
          <Icon
            name="icon_into"
            size={styleRender.fontSize}
            color={styleRender.iconColor}
            style={iconStyles}
          />
        )}
      {styleRender.style === titleStyle.two && styleRender.entranceType === titleEntranceType.text && (
        <Text
          style={{
            color: styleRender.iconColor,
            width: toValidScalePX(200),
            fontSize: toValidScalePX(styleRender.fontSize),
            marginLeft: '-' + toValidScalePX(200),
            textAlign: 'right',
          }}
        >
          {styleRender?.entranceTitle}
        </Text>
      )}
    </View>
  );
};
export default ModuleTitle;
